<template>
    <div class="packageTable">
      <el-card>
        <p>基本需求</p>
        <p>对element的表格属性做了一些基础的封装,包括border,height,stripe等属性以及列循环和分页</p>
        <p>后期仍待需优化</p>
      </el-card>
      <xing-table
        ref="xingTable"
        :border="border"
        :stripe="stripe"
        :max-height="maxHeight"
        :show-summary="showSummary"
        :table-data="tableData"
        :table-column="tableColumn"
        :pagination="pagination"
        :handleSummaries="handleSummaries"
        @sortChange="sortChange"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange">
      </xing-table>
    </div>
</template>

<script>
import XingTable from '../../components/XingTable'
export default {
  name: 'PackageTable',
  components: {
    XingTable
  },
  data () {
    return {
      maxHeight: '400',
      stripe: true,
      border: true,
      showSummary: true,
      tableData: [{
        date: '2016-05-01',
        name: '王小虎1',
        address: '上海市普陀区金沙江路 1518 弄',
        address1: '上海市普陀区金沙江路 1516 弄;上海市普陀;123455'
      }, {
        date: '2016-05-02',
        name: '王小虎2',
        address: '上海市普陀区金沙江路 1517 弄',
        address1: '和束手束脚色即是空'
      }, {
        date: '2016-05-03',
        name: '王小虎3',
        address: '上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路上海市普陀区金沙江路 1519 弄',
        address1: '说是今生今世开始快开始;黑色金属开始看书看'
      }, {
        date: '2016-05-05',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄',
        address1: '说是今生今世开始快开始 1516 弄;是色即是空时刻开始'
      }, {
        date: '2016-05-04',
        name: '王4小虎',
        address: '上海市普陀区金沙江路 1516 弄',
        address1: '还送啊去就去哦你说 1516 弄;色即是空送哦诉求和气候气候'
      }, {
        date: '2016-05-07',
        name: '王3小虎',
        address: '上海市普陀区金沙江路 1516 弄',
        address1: '事实就是宽松舒适计算机技术 1516 弄;是色即是空事情你你却不会回我'
      }],
      tableColumn: [
        {
          label: '日期',
          prop: 'date',
          fixed: 'left',
          width: '200',
          sortable: 'custom'
        },
        {
          label: '名字',
          prop: 'name',
          align: 'center',
          width: '200'
        },
        {
          label: '地址',
          prop: 'address',
          width: '200',
          showOverflowTooltip: true
        },
        {
          label: '地址2',
          prop: 'address',
          width: '200'
        },
        {
          label: '地址4',
          prop: 'address1',
          width: '200',
          split: 'split'
        },
        {
          label: '地址',
          prop: 'address',
          headerAlign: 'center',
          width: '200',
          description: '良好率=(Ⅰ+Ⅱ)÷(Ⅰ+Ⅱ+Ⅲ+Ⅳ+Ⅴ+Ⅵ)',
          fixed: 'right'
        }
      ],
      pagination: {
        total: 100,
        page: 1,
        pageSize: 10,
        pagerCount: 7,
        background: true
      }
    }
  },
  methods: {
    sortChange ({ column, prop, order }) {
      console.log(column, prop, order)
    },
    handleSummaries (params) {
      console.log(params)
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    }
  }
}
</script>

<style scoped>

</style>
